/*
 * @Author: Await
 * @Date: 2025-04-17 16:54:20
 * @LastEditors: Await
 * @LastEditTime: 2025-05-12 17:11:25
 * @Description: 数据映射组件
 */
import React, { useState, useEffect, useRef } from 'react';
import {
    Input,
    Table,
    Button,
    Space,
    Typography,
    Divider,
    Alert,
    Row,
    Col,
    Form,
    Select,
    Upload,
    message,
    Tabs,
    Modal,
    InputNumber,
    Tooltip,
    Radio
} from 'antd';
import {
    PlusOutlined,
    DeleteOutlined,
    UploadOutlined,
    DownloadOutlined,
    SettingOutlined,
    CopyOutlined,
    ExportOutlined,
    ColumnHeightOutlined,
    AppstoreOutlined,
    BarChartOutlined
} from '@ant-design/icons';

import { ChartType, DataConfig, DataItem, SeriesItem } from '../../../types';
import { useEditor } from '..';

// 为window添加自定义属性类型声明
declare global {
    interface Window {
        updateChartTimeout?: number;
    }
}

interface DataMappingProps {
    dataConfig?: DataConfig;
    data?: DataItem[];
    chartType: ChartType;
}

// 数据组结构定义
interface DataGroup {
    id: string;
    name: string;
    data: DataItem[];
    dataConfig: DataConfig;
}

/**
 * 数据映射组件
 */
const DataMapping: React.FC<DataMappingProps> = ({
    dataConfig,
    data = [],
    chartType
}) => {
    // 获取编辑器上下文，用于更新数据配置
    const { updateDataConfig, updateData, updateChart, state } = useEditor();

    // 多组数据相关状态
    const [dataGroups, setDataGroups] = useState<DataGroup[]>([{
        id: '1',
        name: '数据组1',
        data: data,
        dataConfig: dataConfig || {
            dimensions: [],
            measures: []
        }
    }]);
    const [activeGroupIndex, setActiveGroupIndex] = useState<number>(0);
    const [renameModalVisible, setRenameModalVisible] = useState<boolean>(false);
    const [newGroupName, setNewGroupName] = useState<string>('');
    const [editingGroupIndex, setEditingGroupIndex] = useState<number>(-1);

    // 字段管理相关状态
    const [fieldModalVisible, setFieldModalVisible] = useState<boolean>(false);
    const [newFieldName, setNewFieldName] = useState<string>('');
    const [fieldType, setFieldType] = useState<'dimension' | 'measure'>('dimension');
    const [editingFields, setEditingFields] = useState<{ [key: string]: string }>({});
    const [availableFields, setAvailableFields] = useState<string[]>([]);

    // 当前编辑的数据组
    const currentGroup = dataGroups[activeGroupIndex];

    const [displayData, setDisplayData] = useState<DataItem[]>(currentGroup.data);
    const [editMode, setEditMode] = useState<boolean>(false);
    const [localDataConfig, setLocalDataConfig] = useState<DataConfig>(currentGroup.dataConfig);

    // 存储上次多组数据更新的标识，避免重复更新
    const [lastMultiDataUpdateId, setLastMultiDataUpdateId] = useState<number>(0);

    // 用于跟踪多组数据更新状态
    const lastMultiGroupsUpdateRef = useRef<string>('');

    // 用于防抖的计时器引用
    const updateMultiDataDebounceTimerRef = useRef<number | null>(null);

    // 用于防止频繁图表更新的引用
    const lastUpdateKeyRef = useRef<string>('');
    const lastUpdateTimeRef = useRef<number>(0);

    // 更新series配置，将每个数据组作为一个系列添加到图表中
    const updateMultiDataGroups = () => {
        // 只有一个数据组时不需要特殊处理
        if (dataGroups.length <= 1) {
            return;
        }

        // 生成数据组状态的指纹，用于变更检测
        // 将每个数据组的数据内容也包含在指纹中，以便检测数据内容的变化
        const groupsDataFingerprint = dataGroups.map(g => {
            // 生成数据内容的摘要，包含前3条数据的内容
            const dataSummary = g.data.slice(0, 3).map(item => {
                // 从数据项中提取关键字段值
                const keyFields = Object.keys(item).filter(k => k !== '_id').slice(0, 3);
                return keyFields.map(k => `${k}:${item[k]}`).join(',');
            }).join(';');

            // 生成更详细的指纹，包含数据内容摘要，但不包含时间戳
            return `${g.id}:${g.data.length}:${g.dataConfig.dimensions?.length || 0}:${g.dataConfig.measures?.length || 0}:${dataSummary}`;
        }).join('|');

        // 获取当前图表类型进行记录
        const currentChartType = chartType || '';
        const [lastDataFingerprint, lastChartType, lastTimeStr] = (lastMultiGroupsUpdateRef.current || '::0').split('::');

        // 检查是否是强制更新（lastMultiGroupsUpdateRef为空表示强制更新）
        const isForceUpdate = !lastMultiGroupsUpdateRef.current;

        // 如果数据没有变化且图表类型也没变，避免触发不必要的更新
        // 为确保变化能被检测到，添加10秒自动刷新，但只适用于主动编辑操作，非渲染循环
        const lastUpdateTime = Number(lastTimeStr || 0);
        const forceUpdateInterval = 10000; // 10秒强制更新一次
        const shouldForceUpdate = isForceUpdate || (Date.now() - lastUpdateTime > forceUpdateInterval);

        // 检测指纹是否匹配
        const isDataUnchanged = groupsDataFingerprint === lastDataFingerprint;
        const isChartTypeUnchanged = currentChartType === lastChartType;

        // 增加调试日志，帮助排查循环问题
        if (isDataUnchanged && isChartTypeUnchanged) {
            console.log('数据内容和图表类型未变化，检查是否需要强制更新');

            // 只有在明确需要强制更新时才更新
            if (!shouldForceUpdate) {
                console.log('无需强制更新，跳过');
                return;
            } else {
                console.log('达到强制更新时间，执行更新');
            }
        } else {
            if (!isDataUnchanged) {
                console.log('数据内容已变化，需要更新');
            }
            if (!isChartTypeUnchanged) {
                console.log('图表类型已变化，需要更新');
            }
        }

        // 更新最后处理的数据组状态指纹，包含图表类型和时间戳
        lastMultiGroupsUpdateRef.current = `${groupsDataFingerprint}::${currentChartType}::${Date.now()}`;

        // 创建合并后的系列配置
        const seriesConfig: any[] = [];

        // 收集所有x轴字段值，用于统一x轴
        let xAxisData: any[] = [];
        let firstXAxisField = '';

        // 首先确定x轴数据
        dataGroups.forEach((group) => {
            const dimensions = group.dataConfig.dimensions || [];
            const xAxisField = dimensions.find(dim => dim.xAxis)?.field || '';

            if (xAxisField && group.data.length > 0) {
                if (!firstXAxisField) {
                    firstXAxisField = xAxisField;
                    // 使用第一个有效数据组的x轴字段值作为统一x轴数据
                    xAxisData = group.data.map(item => item[xAxisField]);
                }
            }
        });

        // 记录所有数据组，用于调试（减少日志输出）
        // 开发环境使用常量判断，避免使用process.env
        const isDevelopment = false; // 设置为false以禁用额外日志
        if (isDevelopment) {
            console.log('准备渲染多组数据:', dataGroups);
            console.log('当前图表类型:', chartType);
        }

        // 遍历数据组，创建系列配置
        dataGroups.forEach((group, index) => {
            // 获取数据组的维度和度量字段
            const dimensions = group.dataConfig.dimensions || [];
            const measures = group.dataConfig.measures || [];

            // 获取X轴字段
            const xAxisField = dimensions.find(dim => dim.xAxis)?.field || '';

            // 获取Y轴字段
            const yAxisField = measures.find(m => m.primary)?.field ||
                (measures.length > 0 ? measures[0].field : '');

            // 如果没有维度或度量字段，则跳过该数据组
            if (!xAxisField || !yAxisField || group.data.length === 0) {
                return;
            }

            // 提取该数据组的y轴值
            const seriesData = [];

            // 按照统一的x轴顺序，提取对应的y轴值
            for (let i = 0; i < xAxisData.length; i++) {
                const xValue = xAxisData[i];
                // 查找这个x值对应的数据项
                const dataItem = group.data.find(item => item[xAxisField] === xValue);

                // 如果找到了数据项，使用其y值；否则用0
                seriesData.push(dataItem ? dataItem[yAxisField] : 0);
            }

            // 减少日志输出
            if (isDevelopment) {
                console.log(`数据组${index}(${group.name})的系列数据:`, seriesData);
            }

            // 添加系列配置
            seriesConfig.push({
                name: group.name,
                type: chartType.toLowerCase(),
                data: seriesData,
                // 添加一些基本样式
                itemStyle: {
                    // 使用不同颜色区分不同数据组
                    color: index === 0 ? '#5470c6' :
                        index === 1 ? '#91cc75' :
                            index === 2 ? '#fac858' :
                                index === 3 ? '#ee6666' :
                                    index === 4 ? '#73c0de' :
                                        '#3ba272'
                }
            });
        });

        // 只有在series配置非空时才更新图表
        if (seriesConfig.length === 0) {
            console.log('无有效系列数据，跳过图表更新');
            return;
        }

        // 更新图表配置，同时设置统一的x轴
        // 使用类型断言解决_updatedByDataMapping类型问题
        const chartUpdateConfig: any = {
            series: seriesConfig,
            xAxis: {
                type: 'category',
                data: xAxisData,
                // 确保只显示一组x轴标签
                axisLabel: {
                    show: true,
                    interval: 0
                }
            },
            // 添加标记，表示这是由DataMapping组件的多组数据渲染触发的更新
            // 这可以帮助避免循环更新
            _updatedByDataMapping: true,
            // 添加更新时间戳，帮助跟踪更新
            _updateTimestamp: Date.now()
        };

        // 使用防抖，避免频繁更新
        if (window.updateChartTimeout) {
            clearTimeout(window.updateChartTimeout);
        }

        // 添加最后更新标记，用于防止频繁更新
        const now = Date.now();
        const lastUpdateKey = `${chartType}_${seriesConfig.length}`;

        // 检查距离上次相同类型的更新是否太近（500ms内）
        const isTooFrequent =
            lastUpdateKey === lastUpdateKeyRef.current &&
            (now - lastUpdateTimeRef.current) < 500;

        if (isTooFrequent) {
            console.log('检测到过于频繁的图表更新，使用更长的延迟');
        }

        window.updateChartTimeout = setTimeout(() => {
            // 更新最后更新时间和类型
            lastUpdateKeyRef.current = lastUpdateKey;
            lastUpdateTimeRef.current = now;

            // 应用图表更新
            updateChart(chartUpdateConfig);

            // 减少日志输出
            if (isDevelopment) {
                console.log('更新多组数据系列:', seriesConfig);
            }
        }, isTooFrequent ? 800 : 300);
    };

    // 当外部数据变化时更新内部状态
    useEffect(() => {
        if (dataGroups.length === 1) {
            const updatedGroups = [...dataGroups];
            updatedGroups[0].data = data;
            setDataGroups(updatedGroups);
            if (activeGroupIndex === 0) {
                setDisplayData(data);
            }
        }
    }, [data]);

    // 当外部数据配置变化时更新内部状态
    useEffect(() => {
        // 添加深度比较，避免不必要的更新
        const isSameConfig = (a: any, b: any) => {
            if (!a || !b) return a === b;

            // 检查dimensions
            const dimA = a.dimensions || [];
            const dimB = b.dimensions || [];
            if (dimA.length !== dimB.length) return false;

            // 检查measures
            const measA = a.measures || [];
            const measB = b.measures || [];
            if (measA.length !== measB.length) return false;

            return true;
        };

        if (dataConfig && dataGroups.length === 1 && !isSameConfig(dataGroups[0].dataConfig, dataConfig)) {
            console.log('数据配置发生实质变化，更新组件状态');
            const updatedGroups = [...dataGroups];
            updatedGroups[0].dataConfig = dataConfig;
            setDataGroups(updatedGroups);
            if (activeGroupIndex === 0) {
                setLocalDataConfig(dataConfig);
                console.log('DataMapping接收到数据配置:', dataConfig);
            }
        }
    }, [dataConfig]);

    // 当切换活动数据组时，更新显示数据和本地数据配置
    useEffect(() => {
        if (dataGroups[activeGroupIndex]) {
            setDisplayData(dataGroups[activeGroupIndex].data);
            setLocalDataConfig(dataGroups[activeGroupIndex].dataConfig);
        }
    }, [activeGroupIndex, dataGroups]);

    // 在useEffect中添加字段检测和同步
    useEffect(() => {
        if (displayData.length > 0) {
            // 从现有数据中提取字段
            const fields = Object.keys(displayData[0]);
            setAvailableFields(fields);
        } else {
            // 如果没有数据，从配置中提取字段
            const dimensionFields = localDataConfig.dimensions?.map(d => d.field) || [];
            const measureFields = localDataConfig.measures?.map(m => m.field) || [];
            setAvailableFields([...dimensionFields, ...measureFields]);
        }
    }, [displayData, localDataConfig]);

    // 当数据组变化时，自动更新图表 - 使用ref跟踪上次更新，防止循环
    const lastDataGroupsRef = useRef<string>('');

    useEffect(() => {
        // 创建数据组的指纹，用于检测实际变化
        const groupsFingerprint = JSON.stringify(dataGroups.map(g => g.id));

        // 只有当数据组结构实际变化时才更新
        if (groupsFingerprint !== lastDataGroupsRef.current) {
            console.log('数据组结构变化，更新图表');
            lastDataGroupsRef.current = groupsFingerprint;

            // 如果有多个数据组，自动使用多组模式
            if (dataGroups.length > 1) {
                updateMultiDataGroups();
            } else if (dataGroups.length === 1) {
                // 单个数据组时，使用常规模式
                updateData(dataGroups[0].data);
                updateDataConfig(dataGroups[0].dataConfig);
            }
        }

        // 在组件卸载时清理计时器
        return () => {
            if (updateMultiDataDebounceTimerRef.current) {
                clearTimeout(updateMultiDataDebounceTimerRef.current);
                updateMultiDataDebounceTimerRef.current = null;
            }
            if (window.updateChartTimeout) {
                clearTimeout(window.updateChartTimeout);
                window.updateChartTimeout = undefined;
            }
        };
    }, [dataGroups, updateData, updateDataConfig]);

    // 监听图表类型变化，确保类型切换后仍然保持多组数据渲染
    useEffect(() => {
        // 图表类型变化后，检查是否需要重新渲染多组数据
        if (dataGroups.length > 1) {
            console.log('图表类型已变化，重新应用多组数据渲染');

            // 强制清除指纹缓存，确保一定会更新
            lastMultiGroupsUpdateRef.current = '';

            // 延迟执行，确保图表类型已完全切换
            if (updateMultiDataDebounceTimerRef.current) {
                clearTimeout(updateMultiDataDebounceTimerRef.current);
            }

            updateMultiDataDebounceTimerRef.current = setTimeout(() => {
                // 强制执行更新
                updateMultiDataGroups();
                console.log('图表类型变更后触发了多组数据更新');
            }, 200);
        }
    }, [chartType, dataGroups.length]);

    // 移除自动定时更新，改为手动触发更新的机制
    // 注意：不要使用定时器反复调用会导致状态更新的函数，这会引起无限渲染循环

    // 监听_multiDataGroupsUpdated标志变化，这是图表类型切换后由switchChartType函数设置的
    useEffect(() => {
        const multiDataFlag = (state.currentChart as any)?._multiDataGroupsUpdated;

        // 避免重复处理相同的更新标识
        if (multiDataFlag && multiDataFlag !== lastMultiDataUpdateId && dataGroups.length > 1) {
            console.log('检测到图表类型切换后的多组数据标志，重新渲染多组数据');

            // 记录此次更新的标识，防止重复处理
            setLastMultiDataUpdateId(multiDataFlag);

            // 清除任何现有的防抖计时器，避免重复更新
            if (updateMultiDataDebounceTimerRef.current) {
                clearTimeout(updateMultiDataDebounceTimerRef.current);
            }

            // 强制重置指纹状态，确保能检测到变化
            lastMultiGroupsUpdateRef.current = '';

            updateMultiDataDebounceTimerRef.current = setTimeout(() => {
                // 使用标记避免循环更新
                console.log('执行图表类型切换后的多组数据重新渲染');
                updateMultiDataGroups();
            }, 300);
        }
    }, [(state.currentChart as any)?._multiDataGroupsUpdated]);

    // 处理数据导入
    const handleDataImport = (info: any) => {
        if (info.file.status === 'done') {
            message.success(`${info.file.name} 文件上传成功`);
            // 这里会解析文件内容并更新数据
            const reader = new FileReader();
            reader.onload = (e) => {
                try {
                    const content = e.target?.result as string;
                    const importedData = JSON.parse(content);
                    if (Array.isArray(importedData)) {
                        // 更新当前活动数据组
                        const updatedGroups = [...dataGroups];
                        updatedGroups[activeGroupIndex].data = importedData;
                        setDataGroups(updatedGroups);
                        setDisplayData(importedData);

                        // 如果是第一个数据组，也更新全局数据
                        if (activeGroupIndex === 0) {
                            updateData(importedData);
                        }

                        // 自动更新数据映射配置
                        if (importedData.length > 0) {
                            const newConfig = updateDataMappingConfig(importedData);
                            updatedGroups[activeGroupIndex].dataConfig = newConfig;
                            setDataGroups(updatedGroups);
                        }
                    } else {
                        message.error('导入的数据格式不正确，应为JSON数组');
                    }
                } catch (error) {
                    message.error('解析文件内容失败');
                    console.error('解析导入文件失败:', error);
                }
            };
            reader.readAsText(info.file.originFileObj);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件上传失败`);
        }
    };

    // 自动更新数据映射配置
    const updateDataMappingConfig = (dataArray: DataItem[]) => {
        if (!dataArray || dataArray.length === 0) return localDataConfig;

        const firstItem = dataArray[0];
        const fields = Object.keys(firstItem).filter(field => field !== '_id'); // 过滤掉_id字段

        // 简单的自动映射逻辑：
        // - 数字字段作为度量
        // - 非数字字段作为维度
        const dimensions: any[] = [];
        const measures: any[] = [];

        fields.forEach(field => {
            const value = firstItem[field];
            if (typeof value === 'number') {
                measures.push({
                    field,
                    name: field,
                    aggregation: 'sum'
                });
            } else {
                dimensions.push({
                    field,
                    name: field,
                    xAxis: dimensions.length === 0 // 第一个维度字段作为X轴
                });
            }
        });

        const newConfig: DataConfig = {
            dimensions,
            measures
        };

        // 更新本地配置
        setLocalDataConfig(newConfig);

        // 如果是第一个数据组，也更新全局配置
        if (activeGroupIndex === 0) {
            updateDataConfig(newConfig);
        }

        console.log('自动更新数据映射配置:', newConfig);

        return newConfig;
    };

    // 处理数据导出
    const handleDataExport = () => {
        const dataStr = JSON.stringify(displayData, null, 2);
        const blob = new Blob([dataStr], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${dataGroups[activeGroupIndex].name}.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    // 处理添加行
    const handleAddRow = () => {
        // 创建一个包含所有已知字段的新行
        const newRow: DataItem = {
            _id: `row-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` // 添加唯一ID
        };

        // 使用现有数据的字段或者从配置中获取字段
        if (availableFields.length > 0) {
            availableFields.forEach(field => {
                // 根据字段类型设置默认值
                const isMeasure = localDataConfig.measures?.some(m => m.field === field);
                newRow[field] = isMeasure ? 0 : ''; // 度量默认为0，维度默认为空字符串
            });
        } else if (displayData.length > 0) {
            // 如果有现有行，复制其字段结构
            Object.keys(displayData[0]).forEach(field => {
                if (field === '_id') return; // 跳过ID字段
                const value = displayData[0][field];
                newRow[field] = typeof value === 'number' ? 0 : '';
            });
        } else {
            // 如果没有现有行和字段，添加默认字段
            newRow['name'] = '';
            newRow['value'] = 0;

            // 同时更新可用字段列表
            setAvailableFields(['name', 'value']);

            // 更新数据配置
            const newConfig: DataConfig = {
                dimensions: [{ field: 'name', name: 'name', xAxis: true }],
                measures: [{ field: 'value', name: 'value', primary: true, aggregation: 'sum' }]
            };
            setLocalDataConfig(newConfig);

            // 如果是第一个数据组，也更新全局配置
            if (activeGroupIndex === 0) {
                updateDataConfig(newConfig);
            }

            // 更新当前数据组的配置
            const updatedGroups = [...dataGroups];
            updatedGroups[activeGroupIndex].dataConfig = newConfig;
            setDataGroups(updatedGroups);
        }

        const newData = [...displayData, newRow];

        // 更新当前数据组
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].data = newData;
        setDataGroups(updatedGroups);
        setDisplayData(newData);

        // 如果是第一个数据组，也更新全局数据
        if (activeGroupIndex === 0) {
            updateData(newData);
        }
    };

    // 处理删除行
    const handleDeleteRow = (index: number) => {
        const newData = [...displayData];
        newData.splice(index, 1);

        // 更新当前数据组
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].data = newData;
        setDataGroups(updatedGroups);
        setDisplayData(newData);

        // 如果是第一个数据组，也更新全局数据
        if (activeGroupIndex === 0) {
            updateData(newData);
        }
    };

    // 处理数据更改
    const handleDataChange = (index: number, field: string, value: any) => {
        const newData = [...displayData];
        newData[index] = { ...newData[index], [field]: value };

        // 更新当前数据组
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].data = newData;
        setDataGroups(updatedGroups);
        setDisplayData(newData);

        // 如果是第一个数据组，也更新全局数据（但不更新其他数据组）
        if (activeGroupIndex === 0) {
            // 仅更新全局数据，不影响其他数据组
            updateData(newData);
        }

        // 添加调试日志，帮助排查问题
        console.log(`更新数据组 ${activeGroupIndex + 1}（${dataGroups[activeGroupIndex].name}）的数据`, {
            修改行: index,
            修改字段: field,
            新值: value,
            当前激活组: activeGroupIndex,
            数据组总数: dataGroups.length
        });

        // 直接触发数据渲染更新
        // 使用防抖，避免频繁更新
        if (dataGroups.length > 1) {
            console.log('数据已编辑，触发多组数据更新');

            // 在编辑模式中，我们先不更新图表，等编辑完成后更新
            // 这样可以避免频繁更新导致的性能问题
            if (!editMode) {
                // 如果不在编辑模式，立即应用更改
                // 清除缓存的指纹，强制更新
                lastMultiGroupsUpdateRef.current = '';

                if (updateMultiDataDebounceTimerRef.current) {
                    clearTimeout(updateMultiDataDebounceTimerRef.current);
                }

                updateMultiDataDebounceTimerRef.current = setTimeout(() => {
                    updateMultiDataGroups();
                }, 300);
            } else {
                console.log('编辑模式中，等待编辑完成后再更新图表');
            }
        } else if (activeGroupIndex === 0 && !editMode) {
            // 单数据组且不在编辑模式时，立即更新
            updateData(newData);
        }
    };

    // 处理字段映射更改
    const handleDimensionChange = (field: string) => {
        // 更新X轴映射字段
        const dimensions = localDataConfig.dimensions ? [...localDataConfig.dimensions] : [];

        // 清除之前的X轴标记
        dimensions.forEach(dim => {
            if (dim.xAxis) dim.xAxis = false;
        });

        // 查找是否已存在此字段的维度
        const existingIndex = dimensions.findIndex(dim => dim.field === field);
        if (existingIndex >= 0) {
            dimensions[existingIndex].xAxis = true;
        } else {
            dimensions.push({
                field,
                name: field,
                xAxis: true
            });
        }

        const newConfig = {
            ...localDataConfig,
            dimensions
        };

        // 更新当前数据组的配置
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].dataConfig = newConfig;
        setDataGroups(updatedGroups);
        setLocalDataConfig(newConfig);

        // 如果是第一个数据组，也更新全局配置
        if (activeGroupIndex === 0) {
            updateDataConfig(newConfig);
        }

        console.log('更新X轴映射字段:', field, newConfig);
    };

    const handleMeasureChange = (field: string) => {
        // 更新Y轴映射字段
        const measures = localDataConfig.measures ? [...localDataConfig.measures] : [];

        // 清除之前的主要度量标记
        measures.forEach(measure => {
            if (measure.primary) measure.primary = false;
        });

        // 查找是否已存在此字段的度量
        const existingIndex = measures.findIndex(measure => measure.field === field);
        if (existingIndex >= 0) {
            measures[existingIndex].primary = true;
        } else {
            measures.push({
                field,
                name: field,
                primary: true,
                aggregation: 'sum'
            });
        }

        const newConfig = {
            ...localDataConfig,
            measures
        };

        // 更新当前数据组的配置
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].dataConfig = newConfig;
        setDataGroups(updatedGroups);
        setLocalDataConfig(newConfig);

        // 如果是第一个数据组，也更新全局配置
        if (activeGroupIndex === 0) {
            updateDataConfig(newConfig);
        }

        console.log('更新Y轴映射字段:', field, newConfig);
    };

    // 修改选项卡切换处理函数，在切换时更新图表
    const handleTabChange = (key: string) => {
        const index = Number(key);
        if (isNaN(index) || index < 0 || index >= dataGroups.length) {
            return;
        }

        setActiveGroupIndex(index);

        // 如果有多个数据组，只更新当前显示的数据，但仍保持多组模式
        if (dataGroups.length > 1) {
            // 不需要做任何操作，因为已经在多组模式
            return;
        }

        // 只有一个数据组时，更新全局数据和配置
        updateData(dataGroups[index].data);
        updateDataConfig(dataGroups[index].dataConfig);
    };

    // 修改handleAddDataGroup函数，添加数据组后自动使用多组模式
    const handleAddDataGroup = () => {
        const newGroupId = String(Date.now());
        const newGroup: DataGroup = {
            id: newGroupId,
            name: `数据组${dataGroups.length + 1}`,
            data: [],
            dataConfig: {
                dimensions: [],
                measures: []
            }
        };

        const newGroups = [...dataGroups, newGroup];
        setDataGroups(newGroups);
        const newIndex = dataGroups.length;
        setActiveGroupIndex(newIndex);

        // 不需要手动调用updateMultiDataGroups，useEffect会处理
    };

    // 修改handleDuplicateDataGroup函数
    const handleDuplicateDataGroup = () => {
        const sourceGroup = dataGroups[activeGroupIndex];
        const newGroupId = String(Date.now());
        const newGroup: DataGroup = {
            id: newGroupId,
            name: `${sourceGroup.name} (副本)`,
            data: JSON.parse(JSON.stringify(sourceGroup.data)),
            dataConfig: JSON.parse(JSON.stringify(sourceGroup.dataConfig))
        };

        const newGroups = [...dataGroups];
        newGroups.splice(activeGroupIndex + 1, 0, newGroup);
        setDataGroups(newGroups);
        setActiveGroupIndex(activeGroupIndex + 1);

        // 不需要手动调用updateMultiDataGroups，useEffect会处理
    };

    // 修改handleDeleteDataGroup函数
    const handleDeleteDataGroup = (index: number) => {
        if (dataGroups.length <= 1) {
            message.warning('至少需要保留一个数据组');
            return;
        }

        const newGroups = [...dataGroups];
        newGroups.splice(index, 1);
        setDataGroups(newGroups);

        // 如果删除的是当前活动的数据组，则切换到第一个数据组
        if (index === activeGroupIndex) {
            setActiveGroupIndex(0);
        } else if (index < activeGroupIndex) {
            // 如果删除的是当前活动数据组之前的数据组，需要调整当前索引
            setActiveGroupIndex(activeGroupIndex - 1);
        }

        // 不需要手动调用updateMultiDataGroups，useEffect会处理
    };

    // 重命名数据组
    const handleRenameDataGroup = (index: number) => {
        setEditingGroupIndex(index);
        setNewGroupName(dataGroups[index].name);
        setRenameModalVisible(true);
    };

    // 确认重命名
    const confirmRename = () => {
        if (editingGroupIndex >= 0 && newGroupName.trim()) {
            const newGroups = [...dataGroups];
            newGroups[editingGroupIndex].name = newGroupName.trim();
            setDataGroups(newGroups);
        }
        setRenameModalVisible(false);
    };

    // 定义表格列
    const getColumns = () => {
        // 基于数据和图表类型动态生成列
        let columns: any[] = [
            {
                title: '序号',
                dataIndex: 'rowIndex',
                render: (text: any, record: DataItem, recordIndex: number) => {
                    return recordIndex + 1;
                },
                width: 60
            }
        ];

        // 如果有数据，根据第一行数据生成列
        if (displayData.length > 0) {
            const firstRow = displayData[0];
            const fields = Object.keys(firstRow);

            fields.forEach(field => {
                // 过滤掉_id字段，不在表格中显示
                if (field === '_id') return;

                columns.push({
                    title: field,
                    dataIndex: field,
                    key: field,
                    render: (text: any, record: DataItem, index: number) => (
                        editMode ? (
                            <Input
                                value={record[field] as string}
                                onChange={e => {
                                    handleDataChange(index, field, e.target.value);
                                }}
                                size="small"
                            />
                        ) : (
                            text
                        )
                    )
                });
            });
        }

        // 添加操作列
        if (editMode) {
            columns.push({
                title: '操作',
                key: 'action',
                width: 80,
                render: (text: any, record: DataItem, index: number) => {
                    return (
                        <Button
                            type="text"
                            danger
                            icon={<DeleteOutlined />}
                            size="small"
                            onClick={() => handleDeleteRow(index)}
                        />
                    );
                }
            });
        }

        return columns;
    };

    // 获取当前数据中的X轴维度字段
    const getCurrentXAxisField = () => {
        if (localDataConfig.dimensions && localDataConfig.dimensions.length > 0) {
            const xAxisDim = localDataConfig.dimensions.find(dim => dim.xAxis);
            return xAxisDim?.field || '';
        }
        return '';
    };

    // 获取当前数据中的Y轴度量字段
    const getCurrentYAxisField = () => {
        if (localDataConfig.measures && localDataConfig.measures.length > 0) {
            const primaryMeasure = localDataConfig.measures.find(measure => measure.primary);
            return primaryMeasure?.field || localDataConfig.measures[0].field;
        }
        return '';
    };

    // 自定义Tab标签
    const renderTabLabel = (group: DataGroup, index: number) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ marginRight: 8 }}>{group.name}</span>
            {dataGroups.length > 1 && (
                <Tooltip title="删除数据组">
                    <DeleteOutlined
                        onClick={(e) => {
                            e.stopPropagation();
                            handleDeleteDataGroup(index);
                        }}
                        style={{ fontSize: 12 }}
                    />
                </Tooltip>
            )}
        </div>
    );

    // 处理添加新字段
    const handleAddField = () => {
        if (!newFieldName.trim()) {
            message.error('字段名不能为空');
            return;
        }

        if (availableFields.includes(newFieldName)) {
            message.error('字段名已存在');
            return;
        }

        // 更新所有现有数据行，添加新字段
        const updatedData = displayData.map(item => {
            return {
                ...item,
                [newFieldName]: fieldType === 'measure' ? 0 : ''
            };
        });

        // 如果没有数据，添加一个包含新字段的行
        if (updatedData.length === 0) {
            const newRow: DataItem = {
                _id: `row-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // 添加唯一ID
                [newFieldName]: fieldType === 'measure' ? 0 : ''
            };
            updatedData.push(newRow);
        }

        // 更新数据配置
        const updatedConfig = { ...localDataConfig };

        if (fieldType === 'dimension') {
            const dimensions = [...(updatedConfig.dimensions || [])];
            dimensions.push({
                field: newFieldName,
                name: newFieldName,
                xAxis: dimensions.length === 0 // 如果是第一个维度，设为X轴
            });
            updatedConfig.dimensions = dimensions;
        } else {
            const measures = [...(updatedConfig.measures || [])];
            measures.push({
                field: newFieldName,
                name: newFieldName,
                primary: measures.length === 0, // 如果是第一个度量，设为主要度量
                aggregation: 'sum'
            });
            updatedConfig.measures = measures;
        }

        // 更新可用字段列表
        setAvailableFields([...availableFields, newFieldName]);

        // 更新数据和配置
        setDisplayData(updatedData);
        setLocalDataConfig(updatedConfig);

        // 更新当前数据组
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].data = updatedData;
        updatedGroups[activeGroupIndex].dataConfig = updatedConfig;
        setDataGroups(updatedGroups);

        // 如果是第一个数据组，也更新全局数据和配置
        if (activeGroupIndex === 0) {
            updateData(updatedData);
            updateDataConfig(updatedConfig);
        }

        // 重置表单
        setNewFieldName('');
        setFieldModalVisible(false);
    };

    // 处理删除字段
    const handleDeleteField = (field: string) => {
        // 更新所有数据行，移除该字段
        const updatedData = displayData.map(item => {
            const { [field]: _, ...rest } = item;
            return rest;
        });

        // 更新数据配置
        const updatedConfig = { ...localDataConfig };

        // 从维度和度量中移除该字段
        if (updatedConfig.dimensions) {
            updatedConfig.dimensions = updatedConfig.dimensions.filter(d => d.field !== field);
        }

        if (updatedConfig.measures) {
            updatedConfig.measures = updatedConfig.measures.filter(m => m.field !== field);
        }

        // 更新可用字段列表
        setAvailableFields(availableFields.filter(f => f !== field));

        // 更新数据和配置
        setDisplayData(updatedData);
        setLocalDataConfig(updatedConfig);

        // 更新当前数据组
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].data = updatedData;
        updatedGroups[activeGroupIndex].dataConfig = updatedConfig;
        setDataGroups(updatedGroups);

        // 如果是第一个数据组，也更新全局数据和配置
        if (activeGroupIndex === 0) {
            updateData(updatedData);
            updateDataConfig(updatedConfig);
        }
    };

    // 处理字段重命名
    const handleRenameField = (oldField: string, newField: string) => {
        if (!newField.trim() || oldField === newField) {
            return;
        }

        if (availableFields.includes(newField)) {
            message.error('字段名已存在');
            return;
        }

        // 更新所有数据行，重命名字段
        const updatedData = displayData.map(item => {
            const { [oldField]: value, ...rest } = item;
            return {
                ...rest,
                [newField]: value
            };
        });

        // 更新数据配置
        const updatedConfig = { ...localDataConfig };

        // 更新维度
        if (updatedConfig.dimensions) {
            updatedConfig.dimensions = updatedConfig.dimensions.map(d => {
                if (d.field === oldField) {
                    return { ...d, field: newField, name: newField };
                }
                return d;
            });
        }

        // 更新度量
        if (updatedConfig.measures) {
            updatedConfig.measures = updatedConfig.measures.map(m => {
                if (m.field === oldField) {
                    return { ...m, field: newField, name: newField };
                }
                return m;
            });
        }

        // 更新可用字段列表
        const newFields = availableFields.map(f => f === oldField ? newField : f);
        setAvailableFields(newFields);

        // 更新数据和配置
        setDisplayData(updatedData);
        setLocalDataConfig(updatedConfig);

        // 更新当前数据组
        const updatedGroups = [...dataGroups];
        updatedGroups[activeGroupIndex].data = updatedData;
        updatedGroups[activeGroupIndex].dataConfig = updatedConfig;
        setDataGroups(updatedGroups);

        // 如果是第一个数据组，也更新全局数据和配置
        if (activeGroupIndex === 0) {
            updateData(updatedData);
            updateDataConfig(updatedConfig);
        }

        // 清除编辑状态
        const newEditingFields = { ...editingFields };
        delete newEditingFields[oldField];
        setEditingFields(newEditingFields);
    };

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            <div style={{ marginBottom: 16 }}>
                <Typography.Title level={5} style={{ margin: 0, marginBottom: 12 }}>数据管理</Typography.Title>

                <Tabs
                    type="editable-card"
                    activeKey={String(activeGroupIndex)}
                    onChange={handleTabChange}
                    onEdit={(targetKey, action) => {
                        if (action === 'add') {
                            handleAddDataGroup();
                        }
                    }}
                    tabBarExtraContent={
                        <Space>
                            {/* 删除多组模式切换按钮 */}
                            <Tooltip title="复制当前数据组">
                                <Button
                                    icon={<CopyOutlined />}
                                    size="small"
                                    onClick={handleDuplicateDataGroup}
                                />
                            </Tooltip>
                            <Tooltip title="重命名当前数据组">
                                <Button
                                    icon={<ExportOutlined />}
                                    size="small"
                                    onClick={() => handleRenameDataGroup(activeGroupIndex)}
                                />
                            </Tooltip>
                        </Space>
                    }
                    items={dataGroups.map((group, index) => {
                        // 渲染每个标签页的内容
                        const tabContent = (
                            <>
                                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                                    <Button
                                        icon={<ColumnHeightOutlined />}
                                        size="small"
                                        onClick={() => setFieldModalVisible(true)}
                                    >
                                        管理字段
                                    </Button>
                                    <Space>
                                        <Upload
                                            accept=".csv,.json,.xlsx"
                                            showUploadList={false}
                                            customRequest={({ file, onSuccess }) => {
                                                setTimeout(() => {
                                                    if (onSuccess) onSuccess({});
                                                }, 0);
                                            }}
                                            onChange={handleDataImport}
                                        >
                                            <Button icon={<UploadOutlined />} size="small">导入</Button>
                                        </Upload>
                                        <Button
                                            icon={<DownloadOutlined />}
                                            onClick={handleDataExport}
                                            size="small"
                                            disabled={displayData.length === 0}
                                        >
                                            导出
                                        </Button>
                                        <Button
                                            icon={<SettingOutlined />}
                                            onClick={() => {
                                                // 如果是从编辑模式切换到非编辑模式，强制更新图表
                                                if (editMode) {
                                                    console.log('编辑完成，强制更新图表数据');
                                                    // 强制清除指纹缓存
                                                    lastMultiGroupsUpdateRef.current = '';

                                                    // 保存当前编辑的组索引，确保我们只更新正在编辑的组
                                                    const currentEditingGroupIndex = activeGroupIndex;
                                                    console.log(`正在保存数据组 ${currentEditingGroupIndex + 1}（${dataGroups[currentEditingGroupIndex].name}）的编辑`);

                                                    // 如果是单数据组，更新全局数据
                                                    if (dataGroups.length === 1) {
                                                        // 立即更新数据
                                                        updateData(dataGroups[0].data);
                                                        updateDataConfig(dataGroups[0].dataConfig);
                                                    } else if (currentEditingGroupIndex === 0) {
                                                        // 如果编辑的是第一个数据组，需要同步到全局数据
                                                        console.log('同步第一组数据到全局数据');
                                                        updateData(dataGroups[0].data);
                                                        updateDataConfig(dataGroups[0].dataConfig);
                                                        // 然后继续进行多组数据处理
                                                    } else {
                                                        // 多数据组情况 - 直接更新图表，绕过防抖
                                                        // 清除任何计划中的更新
                                                        if (window.updateChartTimeout) {
                                                            clearTimeout(window.updateChartTimeout);
                                                        }

                                                        // 立即构建系列配置
                                                        const seriesConfig: any[] = [];
                                                        let xAxisData: any[] = [];

                                                        // 首先确定每个数据组的x轴字段值，确保数据组之间相互独立
                                                        let firstXAxisField = '';

                                                        // 遍历每个数据组来获取有效的X轴数据
                                                        for (const group of dataGroups) {
                                                            const dimensions = group.dataConfig.dimensions || [];
                                                            const xField = dimensions.find(dim => dim.xAxis)?.field || '';

                                                            if (xField && group.data.length > 0) {
                                                                if (!firstXAxisField) {
                                                                    firstXAxisField = xField;
                                                                    // 使用第一个有效数据组的x轴字段值作为统一x轴数据
                                                                    xAxisData = group.data.map(item => item[xField]);
                                                                }
                                                                break;
                                                            }
                                                        }

                                                        // 创建所有数据组的系列配置
                                                        dataGroups.forEach((group, index) => {
                                                            // 确保使用每个组自己的配置和数据
                                                            const dimensions = group.dataConfig.dimensions || [];
                                                            const measures = group.dataConfig.measures || [];
                                                            const xField = dimensions.find(dim => dim.xAxis)?.field || '';
                                                            const yField = measures.find(m => m.primary)?.field ||
                                                                (measures.length > 0 ? measures[0].field : '');

                                                            if (!xField || !yField || group.data.length === 0) {
                                                                console.log(`跳过数据组 ${index + 1}（${group.name}）：缺少必要的字段配置或数据为空`);
                                                                return;
                                                            }

                                                            console.log(`处理数据组 ${index + 1}（${group.name}）：xField=${xField}, yField=${yField}, 数据行数=${group.data.length}`);

                                                            // 提取y轴数据 - 确保使用各组自己的值
                                                            const seriesData = [];
                                                            if (xAxisData.length > 0) {
                                                                // 使用统一的X轴数据
                                                                for (let i = 0; i < xAxisData.length; i++) {
                                                                    const xValue = xAxisData[i];
                                                                    const dataItem = group.data.find(item => item[xField] === xValue);
                                                                    seriesData.push(dataItem ? dataItem[yField] : 0);
                                                                }
                                                            } else if (group.data.length > 0) {
                                                                // 如果没有统一的X轴数据，使用当前组的数据
                                                                seriesData.push(...group.data.map(item => item[yField] || 0));
                                                            }

                                                            // 添加系列配置
                                                            seriesConfig.push({
                                                                name: group.name,
                                                                type: chartType.toLowerCase(),
                                                                data: seriesData,
                                                                itemStyle: {
                                                                    color: index === 0 ? '#5470c6' :
                                                                        index === 1 ? '#91cc75' :
                                                                            index === 2 ? '#fac858' :
                                                                                index === 3 ? '#ee6666' :
                                                                                    index === 4 ? '#73c0de' : '#3ba272'
                                                                }
                                                            });
                                                        });

                                                        // 直接应用图表更新，无需防抖延迟
                                                        if (seriesConfig.length > 0) {
                                                            console.log('完成编辑：立即应用图表更新');
                                                            // 使用类型断言解决TypeScript错误
                                                            const chartUpdateConfig: any = {
                                                                series: seriesConfig,
                                                                xAxis: {
                                                                    type: 'category',
                                                                    data: xAxisData,
                                                                    axisLabel: { show: true, interval: 0 }
                                                                },
                                                                _updatedByDataMapping: true,
                                                                _updateTimestamp: Date.now()
                                                            };
                                                            updateChart(chartUpdateConfig);
                                                        }
                                                    }
                                                }
                                                setEditMode(!editMode);
                                            }}
                                            type={editMode ? "primary" : "default"}
                                            size="small"
                                        >
                                            {editMode ? "完成编辑" : "编辑数据"}
                                        </Button>
                                    </Space>
                                </div>

                                {displayData.length === 0 ? (
                                    <Alert
                                        message="暂无数据"
                                        description="请通过导入或手动添加数据进行图表配置"
                                        type="info"
                                        showIcon
                                        style={{ marginBottom: 12 }}
                                    />
                                ) : (
                                    <div style={{ marginBottom: 16 }}>
                                        <Alert
                                            message="当前数据"
                                            description={`共 ${displayData.length} 条记录`}
                                            type="success"
                                            showIcon
                                            style={{ marginBottom: 12 }}
                                        />
                                    </div>
                                )}

                                <Table
                                    columns={getColumns()}
                                    dataSource={displayData}
                                    size="small"
                                    pagination={{ pageSize: 5 }}
                                    rowKey={(record) => {
                                        // 优先使用_id字段(我们添加的唯一标识)
                                        if (record._id !== undefined) return record._id;

                                        // 如果record有id字段，优先使用id
                                        if (record.id !== undefined) return record.id.toString();

                                        // 否则使用其他可能的唯一标识符
                                        if (record.key !== undefined) return record.key.toString();

                                        // 使用数组索引和时间戳生成唯一key
                                        const index = displayData.findIndex(item => item === record);
                                        return `row-${index}-${Date.now()}`;
                                    }}
                                    scroll={{ x: 'max-content' }}
                                    footer={() => (
                                        <Button
                                            type="dashed"
                                            icon={<PlusOutlined />}
                                            onClick={handleAddRow}
                                            size="small"
                                            block
                                        >
                                            添加行
                                        </Button>
                                    )}
                                />

                                <Divider style={{ margin: '16px 0' }} />

                                <Typography.Title level={5} style={{ marginTop: 16 }}>数据映射配置</Typography.Title>

                                <Alert
                                    message="数据映射提示"
                                    description={`请将数据字段与图表坐标轴进行映射。当前图表类型: ${chartType}`}
                                    type="info"
                                    showIcon
                                    style={{ marginBottom: 12 }}
                                />

                                <Row gutter={16}>
                                    <Col span={12}>
                                        <Form.Item label="X轴/分类字段" style={{ marginBottom: 8 }}>
                                            <Select
                                                placeholder="选择映射到X轴的字段"
                                                style={{ width: '100%' }}
                                                size="small"
                                                value={getCurrentXAxisField()}
                                                onChange={handleDimensionChange}
                                            >
                                                {availableFields
                                                    .filter(field => field !== '_id') // 过滤掉_id字段
                                                    .map(field => (
                                                        <Select.Option key={field} value={field}>{field}</Select.Option>
                                                    ))
                                                }
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Form.Item label="Y轴/数值字段" style={{ marginBottom: 8 }}>
                                            <Select
                                                placeholder="选择映射到Y轴的字段"
                                                style={{ width: '100%' }}
                                                size="small"
                                                value={getCurrentYAxisField()}
                                                onChange={handleMeasureChange}
                                            >
                                                {availableFields
                                                    .filter(field => field !== '_id') // 过滤掉_id字段
                                                    .map(field => (
                                                        <Select.Option key={field} value={field}>{field}</Select.Option>
                                                    ))
                                                }
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                </Row>

                                <div style={{ marginTop: 16 }}>
                                    <Alert
                                        message="数据映射状态"
                                        description={
                                            <div>
                                                <p>维度字段: {localDataConfig.dimensions?.map(d => d.field).join(', ') || '未设置'}</p>
                                                <p>度量字段: {localDataConfig.measures?.map(m => m.field).join(', ') || '未设置'}</p>
                                            </div>
                                        }
                                        type="success"
                                        showIcon
                                    />
                                </div>
                            </>
                        );

                        return {
                            key: String(index),
                            label: renderTabLabel(group, index),
                            children: tabContent,
                            closable: dataGroups.length > 1
                        };
                    })}
                />
            </div>

            {/* 重命名数据组弹窗 */}
            <Modal
                title="重命名数据组"
                open={renameModalVisible}
                onOk={confirmRename}
                onCancel={() => setRenameModalVisible(false)}
            >
                <Input
                    placeholder="请输入数据组名称"
                    value={newGroupName}
                    onChange={(e) => setNewGroupName(e.target.value)}
                />
            </Modal>

            {/* 字段管理弹窗 */}
            <Modal
                title="字段管理"
                open={fieldModalVisible}
                onCancel={() => setFieldModalVisible(false)}
                footer={null}
                width={600}
            >
                <div style={{ marginBottom: 16 }}>
                    <Typography.Title level={5}>添加新字段</Typography.Title>
                    <Row gutter={8} align="middle">
                        <Col span={10}>
                            <Input
                                placeholder="输入字段名称"
                                value={newFieldName}
                                onChange={(e) => setNewFieldName(e.target.value)}
                            />
                        </Col>
                        <Col span={10}>
                            <Radio.Group
                                value={fieldType}
                                onChange={(e) => setFieldType(e.target.value)}
                                buttonStyle="solid"
                            >
                                <Radio.Button value="dimension">维度</Radio.Button>
                                <Radio.Button value="measure">度量</Radio.Button>
                            </Radio.Group>
                        </Col>
                        <Col span={4}>
                            <Button type="primary" onClick={handleAddField}>添加</Button>
                        </Col>
                    </Row>
                </div>

                <Divider />

                <Typography.Title level={5}>当前字段列表</Typography.Title>
                <Table
                    dataSource={availableFields
                        .filter(field => field !== '_id') // 过滤掉_id字段
                        .map(field => {
                            // 判断字段类型
                            const isDimension = localDataConfig.dimensions?.some(d => d.field === field);
                            const isMeasure = localDataConfig.measures?.some(m => m.field === field);

                            return {
                                field,
                                type: isDimension ? '维度' : isMeasure ? '度量' : '未分类',
                                isXAxis: localDataConfig.dimensions?.some(d => d.field === field && d.xAxis),
                                isPrimary: localDataConfig.measures?.some(m => m.field === field && m.primary)
                            };
                        })}
                    columns={[
                        {
                            title: '字段名',
                            dataIndex: 'field',
                            key: 'field',
                            render: (text, record) => {
                                if (editingFields[text]) {
                                    return (
                                        <Input
                                            value={editingFields[text]}
                                            onChange={(e) => setEditingFields({
                                                ...editingFields,
                                                [text]: e.target.value
                                            })}
                                            onPressEnter={() => handleRenameField(text, editingFields[text])}
                                            onBlur={() => handleRenameField(text, editingFields[text])}
                                            size="small"
                                        />
                                    );
                                }
                                return (
                                    <Typography.Text
                                        onClick={() => setEditingFields({
                                            ...editingFields,
                                            [text]: text
                                        })}
                                    >
                                        {text}
                                    </Typography.Text>
                                );
                            }
                        },
                        {
                            title: '类型',
                            dataIndex: 'type',
                            key: 'type'
                        },
                        {
                            title: '角色',
                            key: 'role',
                            render: (text, record) => {
                                if (record.isXAxis) return 'X轴';
                                if (record.isPrimary) return 'Y轴主要度量';
                                return '-';
                            }
                        },
                        {
                            title: '操作',
                            key: 'action',
                            render: (text, record) => (
                                <Button
                                    type="text"
                                    danger
                                    icon={<DeleteOutlined />}
                                    size="small"
                                    onClick={() => handleDeleteField(record.field)}
                                />
                            )
                        }
                    ]}
                    size="small"
                    pagination={false}
                />
            </Modal>
        </div>
    );
};

// 只使用默认导出，确保最大兼容性
export default DataMapping; 